<template>
  <div class="app-container">
    <div class="page-single">
      <gaf-business-box :data-source="dataSource" @searchValue="searchValue">
        <template v-slot:ProInstCode="{ PIC }">
          <span>{{ PIC.record.ProInst_Code }}</span>
          <br />
          <span class="ab-pic" v-html="PIC.record.ProActTypeIcon"></span>
        </template>
        <template v-slot:ProInstName="{ PIN }">
          <span class="ab-pin">{{ PIN.record.ProInst_Name }}</span>
          <br />
          <span>收件时间：{{ PIN.record.ProInst_StartDate }}</span>
        </template>
        <template v-slot:ActInstName="{ AIN }">
          <a-tag color="green">{{ AIN.record.ActInst_Name }}</a-tag>
        </template>
        <template v-slot:ProDefTypeName="{ PDTN }">
          <span>{{ PDTN.record.ProInst_Name }}</span>
          <br />
          <span>{{ PDTN.record.ProDef_TypeName }}</span>
        </template>
        <template v-slot:ActInstEndDate="{ AIED }">
          <gaf-time-switch
            :end-time="AIED.record.ActInst_EndDate"
          ></gaf-time-switch>
        </template>
        <template v-slot:operation="{ ot }">
          <a
            href="javascript:void(0);"
            rel="external nofollow"
            class="btn-view"
            @click.stop="toMallInfo(ot.record)"
            ><a-icon type="edit" /> 查看</a
          >
          <a-divider type="vertical" />
          <a-popconfirm
            title="撤销后无法恢复，确认是否继续?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="() => deleteRoute(ot.record)"
          >
            <a href="javascript:;" class="btn-del"
              ><a-icon type="delete" /> 撤销挂起</a
            >
          </a-popconfirm>
        </template>
      </gaf-business-box>
    </div>
  </div>
</template>
<script>
//test
import GafBusinessBox from '../../views/GafWorkflowCommon/GafBusinessBox'
import GafTimeSwitch from '../../views/GafWorkflowCommon/GafTimeSwitch'
export default {
  name: 'GafHangingBox',
  components: {
    GafBusinessBox,
    GafTimeSwitch,
  },
  data() {
    return {
      dataSource: [],
    }
  },
  created() {
    this.getTable()
  },
  methods: {
    toMallInfo(record) {
      const proInstID = record.ProInst_ID
      const ActInstID = record.ActInst_ID
      const nowActInstId = record.NowActInst_ID
      this.$router.push({
        path: './GafHangingSon',
        query: {
          proInstId: proInstID,
          actInstId: ActInstID,
          nowActInstId,
        },
      })
    },
    /* 查询 接口 */
    async searchValue(keyword) {
      const url = `/workflow/query/hangup-process`
      const rst = await this.$axios.post(url, { keyword })
      if (rst.data.isSuccessed) {
        this.dataSource = rst.data.data.content
      }
    },
    /* 撤销挂起 */
    async deleteRoute(record) {
      const nowActInstId = record.NowActInst_ID
      const url = `/workflow/execute/process/hangup/retract`
      const rst = await this.$axios.post(url, { nowActInstId })
      if (rst.data.isSuccessed) {
        this.$message.success('操作成功')
      } else {
        this.$message.error(rst.data.message)
      }
    },
    /* 获取后台的数据 接口 */
    async getTable() {
      const url = `/workflow/query/hangup-process`
      const rst = await this.$axios.post(url, {})
      if (rst.data.isSuccessed) {
        // this.$message.success('成功')
      } else {
        this.$message.error('更新失败')
      }
      this.dataSource = rst.data.data.content
    },
  },
}
</script>
<style scoped>
.ab-pic {
  background: rgb(66, 105, 233);
  color: white;
  padding: 0 3%;
  border-radius: 5px;
}
.ab-pin {
  font-weight: bolder;
}
</style>
